<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">   
    <title>装载页面定义数据</title>

    <!-- placeholders for the theme switcher -->
    <link rel='stylesheet' id='theme_stylesheet'>
    <link rel='stylesheet' id='icon_stylesheet'>

    <style>[class*="foundicon-"] {font-family: GeneralFoundicons;font-style: normal;}</style>
    <script src='jquery-1.9.1.min.js'></script>
    <script src='dist/jsoneditor.js'></script>
    <script src='widget/widgetdef.js'></script>
    <script src='widget/metacommon.js'></script>
    <script src='widget/meta2util.js'></script>
</head>
<body> 
<div class='container'>
    <div class='row' >
        <div class='span8 col-md-8 columns eight large-8' style="width:100%;">
            <h2></h2>
            <p></p>
            <div id='editor'></div>
        </div>
        <div class='row'>
            <div class='span12 col-md-12 columns twelve large-12'>
                <h2>最终数据模型定义（含运营参数）</h2>
                <p> <input type="button" value="页面数据装载" class='btn btn-primary' id='reloadMetaContent'/></p>
                <textarea id='output' style='width: 100%; height: 100px; font-family: monospace;' class='form-control'></textarea>
            </div> 
       </div>
</div>       
<script>

    // Divs/textareas on the page
    var $schema = document.getElementById('schema');
    var $output = document.getElementById('output');
    var $output_cnt = document.getElementById('output_cnt');
    var $editor = document.getElementById('editor');
    var $validate = document.getElementById('validate');

    var $contenteditor = document.getElementById("contenteditor");

    // Buttons
    var $set_schema_button = document.getElementById('setschema');
    var $load_schema_button = document.getElementById('loadSchema');
    var $load_content_button = document.getElementById("updateContent");
    var $set_value_button = document.getElementById('setvalue');

var gReload = null;
var mark = 1;
(function() {

       themecss = '/bootstrap3.2full.css';
        document.getElementById('theme_stylesheet').href = themecss;
        theme = 'bootstrap3';// 
        JSONEditor.defaults.options.theme = theme;

    var jsoneditor;
 
    var reload = function(keep_value) {
        var startval = (jsoneditor && keep_value)? jsoneditor.getValue() : window.startval;
        window.startval = undefined;

        if(jsoneditor) jsoneditor.destroy(); 
        jsoneditor = new JSONEditor($editor,{
            schema: schema,
            startval: startval,
            ajax:true,
            disable_edit_json:true,
            disable_properties:true,
            collapse:true
            // threme:'bootstrap2'
        });
        gReload = reload;
        window.jsoneditor = jsoneditor;

        // When the value of the editor changes, update the JSON output and validation message
        jsoneditor.on('change',function() {
            var json = jsoneditor.getValue();

            $output.value = JSON.stringify(json,null,2);

            var validation_errors = jsoneditor.validate($output.value);
            // Show validation errors if there are any
            if(validation_errors.length) {
//                 $validate.value = JSON.stringify(validation_errors,null,2);
                console.log("validate result:" + JSON.stringify(validation_errors,null,2));
            }
            else {
//                 $validate.value = 'valid';
                console.log("validate result: valid" )
            }
         });
    };



        try{
            
        if(pagemeta.inited != false ) 
            pagemeta.init(); 
            //var stringMeta = pagemeta.loadPageMetaMetaDef("/4G/4gpageMeta_array.json"); //复杂类型
           var stringMeta = pagemeta.loadPageMetaMetaDef("/4G/4gpageMeta.json");   //4G
//             var stringMeta = pagemeta.loadPageMetaMetaDef("/4G/TypeSysShow.json") ;//基础类型
            schema = JSON.parse(stringMeta);
            reload();
        }
        catch(e){         
            alert('error on loading Schema from file: '+e.message);
            throw e;   
        }

})();


</script>
</body>
</html>
